<template>
  <div class="chunk">
    <div class="heade-option">
      <el-button type="success" size="medium" round @click="addMenu"
        >新增菜单</el-button
      >
    </div>
  </div>
  <div class="chunk">
    <el-table
      :data="handleVueRouterList"
      row-key="meta.id"
      border
      size="medium"
      :indent="16"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      >

      <el-table-column label="id" prop="id" fixed="left">
        <template slot-scope="scope">
          <span>{{ scope.row.meta.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" width="140" fixed="left">
        <template slot-scope="scope">
          <span>{{ scope.row.meta.title }}</span>
        </template>
      </el-table-column>

      <el-table-column label="类型" width="80" align="center">
        <template slot-scope="scope">
          <template>
            <el-tag size="small">{{
              $dictionary.extend("MENU_TYPE", scope.row.meta.type)
            }}</el-tag>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="组件文件路径" align="center" width="190">
        <template slot-scope="scope">
          <span>
            {{ scope.row.meta.component }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="图标" width="80" align="center">
        <template slot-scope="scope">
          <i
            class="overall-icon"
            style="font-size: 18px"
            :class="scope.row.meta.icon.normal"
          ></i>
        </template>
      </el-table-column>

      <el-table-column label="激活图标" width="80" align="center">
        <template slot-scope="scope">
          <i
            class="overall-icon"
            style="font-size: 18px"
            :class="scope.row.meta.icon.active"
          ></i>
        </template>
      </el-table-column>

      <el-table-column label="name" prop="name" width="180"> </el-table-column>

      <el-table-column label="访问路由" prop="path" width="280">
      </el-table-column>

      <el-table-column label="重定向" prop="state" align="center">
        <template slot-scope="scope">
          <template v-if="scope.row.meta.redirect.redirect_state">
            <el-tag size="small" effect="dark">开启</el-tag>
          </template>
          <template v-else> - </template>
        </template>
      </el-table-column>

      <el-table-column
        label="重定向方式"
        prop="state"
        align="center"
        width="190"
      >
        <template slot-scope="scope">
          {{
            scope.row.meta.redirect.redirect_state
              ? $dictionary.extend(
                  "MENU_REDIRECT",
                  scope.row.meta.redirect.redirect_type
                )
              : "-"
          }}
        </template>
      </el-table-column>

      <el-table-column
        label="重定向地址"
        prop="state"
        align="center"
        width="200"
      >
        <template slot-scope="scope">
          {{
            scope.row.meta.redirect.redirect_state
              ? scope.row.meta.redirect.redirect_url
              : "-"
          }}
        </template>
      </el-table-column>

      <el-table-column label="菜单栏" align="center">
        <template slot-scope="scope">
          <el-switch :value="scope.row.meta.display.navigator_show">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="面包屑" align="center">
        <template slot-scope="scope">
          <el-switch :value="scope.row.meta.display.breadcrumbs_show">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="默认展开" align="center">
        <template slot-scope="scope">
          <el-switch :value="scope.row.meta.display.childrenDevelop">
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="菜单箭头" align="center">
        <template slot-scope="scope">
          <el-switch :value="scope.row.meta.display.right_arrow"> </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="state" align="center">
        <template slot-scope="scope">
          <el-tag type="danger" size="small" effect="dark">{{
            scope.row.meta.state
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="state" align="center">
        <template slot-scope="scope">
          <el-tag type="danger" size="small" effect="dark">{{
            scope.row.meta.state
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="320" align="center">
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.meta.type == 1"
            type="primary"
            size="mini"
            plain
            @click="addChildMenu(scope.row)"
            >新增子菜单</el-link
          >
          <el-link
            type="primary"
            size="mini"
            plain
            @click="editMenuItem(scope.row)"
            >编辑</el-link
          >
          <el-link
            type="danger"
            size="mini"
            plain
            @click="clickRemoveMenuButton(scope.row)"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { reactive,onBeforeMount } from "vue";
import api from "@/api";
const Data = reactive({



});
onBeforeMount(()=>{

})
// 删除
function clickRemoveMenuButton(e) {
  console.log("removeMenuItem e");
  console.log(e);
  let { id } = e;
  this.removeMenuItem(id).then((result) => {
    console.log(result);
  });
}
function removeMenuItem(id) {
  return this.$axios.post(api.mork_navigator_data, {
    active: "remove",
    data: { id },
  });
}
// 编辑
function editMenuItem(e) {
  console.log(e);
  console.log("点击了编辑");
}
// 新增
function addMenuItem(e) {
  console.log(e);
  console.log("点击了新增");
}
// 查看
function getMenuItem() {}
// 新增主菜单
function addMenu() {}

function addChildMenu(row) {}
</script>

<style>
.chunk {
  background: white;
  margin-bottom: 20px;
  padding: 14px 14px;
}

.menu-header {
  height: 46px;
  background: white;
}

.heade-option {
}
.table-menu {
  height: 65px;
  box-shadow: 0px 0px 3px #c3c3c324;
  display: flex;
  align-items: center;
  padding: 0px 15px;
}
</style>
